<template>
  <div>
    <CommonHeader :title="title"></CommonHeader>
    <CitySearch :cityData="cityData"></CitySearch>
    <CityContent :cityData="cityData" :letter="newLetter"></CityContent>
    <Alphabet :cityData="cityData" @jumpLetter="jumpLetter"></Alphabet>
  </div>
</template>

<script>
import CommonHeader from '../common/CommonHeader.vue'
import CitySearch from './components/CitySearch.vue'
import CityContent from './components/CityContent.vue'
import Alphabet from './components/Alphabet.vue'
export default {
  name: 'IndexHeader',
  components: {
    CommonHeader,
    CitySearch,
    CityContent,
    Alphabet
  },
  data () {
    return {
      title: '选择城市',
      cityData: {},
      newLetter: ''
    }
  },
  methods: {
    getData () {
      this.$axios.get('/api/city.json').then((res) => {
        const data = res.data
        if (data.ret && data.data) {
          this.cityData = data.data
        }
      })
    },
    jumpLetter (msg) {
      this.newLetter = msg
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
</style>
